<!-- 个人信息 -->
<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item><i class="el-icon-lx-calendar"></i> 个人中心</el-breadcrumb-item>
        <el-breadcrumb-item>个人信息</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="form-box">
        <el-form ref="formRef" :rules="rules" :model="userForm" v-loading="loading" label-width="100px">
          <el-form-item label="角色：" prop="role_name">
            <el-input v-model="userForm.role_name" disabled placeholder="角色"></el-input>
          </el-form-item>
          <el-form-item label="组织：" prop="agency_name">
            <el-input v-model="userForm.agency_name" disabled placeholder="组织"></el-input>
          </el-form-item>
          <el-form-item label="用户名：" prop="user_name">
            <el-input v-model="userForm.user_name" disabled placeholder="用户名"></el-input>
          </el-form-item>
          <el-form-item label="昵称：" prop="nick_name">
            <el-input v-model="userForm.nick_name" placeholder="请输入昵称"></el-input>
          </el-form-item>
          <el-form-item label="手机号：" prop="mobile">
            <el-input v-model="userForm.mobile" placeholder="请输入手机号"></el-input>
          </el-form-item>
          <el-form-item label="头像：" prop="avatar">
            <UploadImageInfo suggestInfo="" v-model:disabledbtn="disabledbtn" v-model:loading="loading" imageKey="avatar" v-model:form="userForm" />
          </el-form-item>
          <el-form-item>
            <el-button :disabled="disabledbtn" type="primary" @click="submitForm(userForm)">保存 </el-button>
            <!-- <el-button type="primary" @click="submitForm(userForm)" v-permission="'edit'">保存 </el-button> -->
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="personalInfo">
import UploadImageInfo from "@/components/common/UploadImageInfo.vue";
import { type FormRules } from "element-plus";
import { useUserStore } from "@/store/user";
import type { IPersonalForm } from "@/types/user";
import { updateMyInfo } from "@/utils/api/master";
import { mobildVerify } from "@/utils/utils";

const loading = ref(false);
const disabledbtn = ref(false);
const formRef = useTemplateRef("formRef");
const userForm = reactive<IPersonalForm>({
  agency_name: "",
  role_name: "",
  user_name: "",
  nick_name: "",
  mobile: "",
  avatar: ""
});

const rules = reactive<FormRules<typeof userForm>>({
  nick_name: [{ required: true, message: "请输入昵称", trigger: "blur" }],
  mobile: [{ required: true, validator: mobildVerify, trigger: "blur" }]
});
const userStore = useUserStore(); /* 用户信息 */

/* 获取用户信息 */
function handleGetUserInfo() {
  userStore
    .getUserInfoInfo<IPersonalForm>()
    .then(res => {
      userForm.agency_name = res.result.agency_name;
      userForm.role_name = res.result.role_name;
      userForm.user_name = res.result.user_name;
      userForm.nick_name = res.result.nick_name;
      userForm.mobile = res.result.mobile;
      userForm.avatar = res.result.avatar;
      userStore.setUserInfo(userForm);
    })
    .catch(res => {
      console.log(res);
    });
}

/* 保存或编辑 */
function submitForm(formData: IPersonalForm) {
  if (!formRef.value) return;
  formRef.value.validate(valid => {
    if (!valid) {
      ElMessage.warning("请填写必填字段");
      return;
    }
    submitFormInfo(formData);
  });
}
/* 保存或编辑信息 */
function submitFormInfo(formData: IPersonalForm) {
  loading.value = true;
  disabledbtn.value = true;

  updateMyInfo(formData)
    .then(res => {
      ElMessage.success(res.msg);
      userStore.setUserInfo(userForm);
    })
    .catch(err => {
      console.log(err);
    })
    .finally(() => {
      loading.value = false;
      disabledbtn.value = false;
    });
}

/* 获取用户信息 */
handleGetUserInfo();
</script>

<style lang="scss">
/* 修改Switch开关 */
.el-switch {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
</style>
